<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row
          type="flex"
          justify="space-between"
        >
          <a-col
            :md="18"
            :sm="12"
          >
            <a-row :gutter="12">
              <a-col
                :md="6"
                :sm="8"
              >
                <a-form-item>
                  <a-input
                    v-model="queryParam.projectName"
                    placeholder="项目名称"
                  />
                </a-form-item>
              </a-col>
              <a-col
                :md="6"
                :sm="8"
              >
                <a-form-item>
                  <a-select
                    v-model="queryParam.projectStatus"
                    placeholder="项目状态"
                    allowClear
                    @change="change(queryParam.projectStatus)"
                  >
                    <a-select-option
                      v-for="(value, name) in statusOptions"
                      :key="name"
                      :value="name"
                    >
                      {{ value.text }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col
                :md="6"
                :sm="8"
              >
                <span class="table-page-search-submitButtons">
                  <a-button
                    type="primary"
                    @click="$refs.table.refresh(true)"
                  >查询</a-button>
                  <a-button
                    style="margin-left: 8px"
                    @click="() => queryParam = {}"
                  >重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-col>
          <a-col
            :md="2"
            :sm="4"
          >
            <a-button
              type="primary"
              icon="plus"
              @click="$router.push('/project/add')"
            >新建</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- <div class="table-operator">
      <a-button type="default" icon="download">导出</a-button>
      <a-button type="dashed" @click="tableOption">{{ optionAlertShow && '关闭' || '开启' }} alert</a-button>
      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作 <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div> -->

    <s-table
      ref="table"
      size="default"
      rowKey="projectId"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
    >
      <!-- :alert="options.alert"
      :rowSelection="options.rowSelection" -->

      <!-- <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span> -->
      <span
        slot="status"
        slot-scope="text"
      >
        <a-badge
          :status="text | status('projectStatus', 'status')"
          :text="text | status('projectStatus', 'text')"
        />
      </span>
      <span
        slot="description"
        slot-scope="text"
      >
        <ellipsis
          :length="12"
          tooltip
        >{{ text }}</ellipsis>
      </span>
      <span
        slot="createdTime"
        slot-scope="text"
      >{{ text | moment }}</span>
      <span
        slot="membersAction"
        slot-scope="text, record"
      >
        <template>
          <a @click="showMembers(record)">点击查看</a>
        </template>
      </span>

      <span
        slot="action"
        slot-scope="text, record"
      >
        <template>
          <a @click="gotoDetail(record)">详情</a>
        </template>
      </span>
    </s-table>
    <create-form
      ref="createModal"
      @ok="handleOk"
    />
    <step-by-step-modal
      ref="modal"
      @ok="handleOk"
    />
    <a-modal
      v-model="membersModalVisible"
      :footer="null"
      title="服务者"
      width="1000px"
      @cancel="hideMembers"
    >
      <members-table
        :data="membersList"
        :loading="membersLoading"
      />
    </a-modal>
  </a-card>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import StepByStepModal from '@/modules/StepByStepModal'
import CreateForm from '@/modules/CreateForm'
import { getProjectList, getProjectMembers } from '@/api/manage'
import MembersTable from './members-table'
import { projectStatus } from '@/utils/statusFilters'

export default {
  name: 'TableListPage',
  components: {
    STable,
    Ellipsis,
    CreateForm,
    StepByStepModal,
    MembersTable
  },
  data() {
    return {
      mdl: {},
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        // {
        //   title: '#',
        //   scopedSlots: { customRender: 'serial' }
        // },
        {
          title: '项目ID',
          dataIndex: 'projectId'
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          scopedSlots: { customRender: 'enterpriseName' }
        },
        {
          title: '企业名称',
          dataIndex: 'enterpriseName',
          scopedSlots: { customRender: 'description' }
        },
        {
          title: '项目分类',
          dataIndex: 'categoryName'
          // sorter: true
          // needTotal: true,
          // customRender: (text) => text + ' 次'
        },
        {
          title: '服务者',
          // dataIndex: 'projectId',
          scopedSlots: { customRender: 'membersAction' }
        },
        {
          title: '项目状态',
          dataIndex: 'projectStatus',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '创建时间',
          dataIndex: 'createdTime',
          scopedSlots: { customRender: 'createdTime' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          // width: '150px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        console.log('loadData.parameter', parameter)
        return getProjectList(Object.assign(parameter, this.queryParam))
          .then(res => {
            return res.resData
          })
      },
      selectedRowKeys: [],
      selectedRows: [],

      // custom table alert & rowSelection
      options: {
        alert: { show: false, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      optionAlertShow: false,
      membersModalVisible: false,
      membersList: [],
      membersLoading: false,
      statusOptions: projectStatus
    }
  },
  created() {
    // this.tableOption()
    // getRoleList({ t: new Date() })
  },
  methods: {
    // tableOption () {
    //   if (!this.optionAlertShow) {
    //     this.options = {
    //       alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
    //       rowSelection: {
    //         selectedRowKeys: this.selectedRowKeys,
    //         onChange: this.onSelectChange,
    //         getCheckboxProps: record => ({
    //           props: {
    //             disabled: record.no === 'No 2', // Column configuration not to be checked
    //             name: record.no
    //           }
    //         })
    //       }
    //     }
    //     this.optionAlertShow = true
    //   } else {
    //     this.options = {
    //       alert: false,
    //       rowSelection: null
    //     }
    //     this.optionAlertShow = false
    //   }
    // },
    change(projectStatus) {
      if (projectStatus === undefined) {
        this.queryParam = {}
      }
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    showMembers(record) {
      this.membersModalVisible = true
      this.getMembers(record.projectId)
    },
    getMembers(projectId) {
      if (this.membersLoading) {
        return
      }
      this.membersLoading = true
      getProjectMembers(projectId).then(res => {
        this.membersList = res.resData
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.membersLoading = false
      })
    },
    hideMembers() {
      this.membersModalVisible = false
    },
    gotoDetail(record) {
      this.$router.push('/project/detail/' + record.projectId)
    }
  }
}
</script>
